<template>
	<view class="details">
		<view class="bar">
			<statusTab @checkTab="checkTabClick" :list="list" ref="statusTabRef" />
		</view>
		<view class="conter">
			<view v-if="checkStatus == 0" class="card step1">
				<view class="col">
					<text class="lebel">联系人</text>
					<view class="right">
						<text>{{detailsData?.contacts}}</text>
					</view>
				</view>

				<view class="col">
					<text class="lebel">联系人电话</text>
					<view class="right">
						<text>{{detailsData?.contacts_phone}}</text>
					</view>
				</view>


				<view class="col">
					<text class="lebel">联系人身份证号</text>
					<view class="right">
						<text>{{detailsData?.contacts_card}}</text>
					</view>
				</view>


				<view class="col">
					<text class="lebel">户主姓名</text>
					<view class="right">
						<text>{{detailsData?.householder_person}}</text>
					</view>
				</view>


				<view class="col">
					<text class="lebel">户主身份证号</text>
					<view class="right">
						<text>{{detailsData?.householder_card}}</text>
					</view>
				</view>



				<view class="col">
					<text class="lebel">身份证有效期</text>
					<view class="right">
						<text>{{detailsData?.householder_card_from}}-{{detailsData?.householder_card_to}}</text>
					</view>
				</view>


				<view class="col">
					<text class="lebel">户主证件</text>
					<view class="right">
						<view class="row">
							<view class="img">
								<image :src="detailsData?.householder_face"></image>
							</view>
						</view>
						<view class="row">
							<view class="img">
								<image :src="detailsData?.householder_back"></image>
							</view>
						</view>
					</view>
				</view>


				<view class="col">
					<text class="lebel">户主家庭住址</text>
					<view class="right">
						<text>{{detailsData?.province_name}}{{detailsData?.city_name}}{{detailsData?.county_name}}{{detailsData?.address}}</text>
					</view>
				</view>

				<view class="col">
					<text class="lebel">户主的电户号</text>
					<view class="right">
						<text>{{detailsData?.electric_num}}</text>
					</view>
				</view>

				<view class="col" v-if="certsArray.length!==0">
					<text class="lebel">户主的房产证明</text>
					<view class="right">
						<view class="row" v-for="(imageUrl6, index6) in certsArray" :key="index6">
							<view class="img">
								<image :src="imageUrl6" alt="Position Image" />
							</view>
						</view>


					</view>
				</view>




			</view>


			<view v-if="checkStatus == 1" class="card step2">
				<view class="col">
					<text class="label">房间尺寸</text>
					<text
						class="tx">长:{{detailsData?.long}}mm-宽:{{detailsData?.width}}mm-高{{detailsData?.height}}mm</text>
				</view>

				<view class="col">
					<text class="label">房间门洞尺寸</text>
					<view class="right">
						<view class="row" v-for="(item1,index1) in detailsData?.door" :key="index1">
							<view class="img">
								<image src="https://img.zhizhuangtong.com/project_media/img/xcx/khd/men.png"></image>
							</view>
							<text class="tx">长:{{item1.long}}mm 宽:{{item1.width}}mm 高:{{item1.height}}mm</text>
						</view>

					</view>
				</view>



				<view class="col">
					<text class="label">房间窗户尺寸</text>
					<view class="right">
						<view class="row" v-for="(item2,index2) in detailsData?.window" :key="index2">
							<view class="img">
								<image src="https://img.zhizhuangtong.com/project_media/img/xcx/khd/chuang.png"></image>
							</view>
							<text class="tx">长:{{item2.long}}mm 宽:{{item2.width}}mm 高:{{item2.height}}mm</text>
						</view>
					</view>
				</view>
				<view class="col" v-if="positionArray.length!==0">
					<text class="label">暖心房所在位置图片</text>
					<view class="right2">
						<view class="row" v-for="(imageUrl1, index3) in positionArray" :key="index3">
							<view class="img">
								<image :src="imageUrl1" alt="Position Image" />
							</view>
						</view>

					</view>
				</view>

			</view>
			<view v-if="checkStatus == 2" class="card step3">

				<view class="col">
					<text class="label">屋面是否能放置光伏</text>
					<text class="tx">{{detailsData?.pv == 0 ?'否':'是'}}</text>
				</view>

				<view class="col" v-if="detailsData?.pv == 1">
					<text class="label">屋面尺寸</text>
					<text class="tx">长:{{detailsData?.roof_long}}mm 宽:{{detailsData?.roof_width }}mm</text>
				</view>
				<view class="col" v-if="detailsData?.pv == 1 && roofArr.length!==0">
					<text class="label">屋面照片</text>
					<view class="right2">
						<view class="row" v-for="(imageUrl2, index4) in roofArr" :key="index4">
							<image :src="imageUrl2" alt="Position Image" />
						</view>
					</view>
				</view>

				<view class="col" v-if="detailsData?.pv == 0 &&placeArr.length!==0">
					<text class="label">安装位置照片</text>
					<view class="right2">
						<view class="row" v-for="(imageUrl3, index5) in placeArr" :key="index5">
							<view class="img">
								<image :src="imageUrl3" alt="Position Image" />
							</view>
						</view>
					</view>
				</view>


				<view class="col" v-if="detailsData?.pv == 0">
					<text class="label">描述</text>
					<text class="tx">{{detailsData?.desc}}</text>
				</view>


			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		toRaw
	} from 'vue'
	import {
		onLoad,
		onShow,
		onUnload,
		onReady
	} from "@dcloudio/uni-app";

	import {
		details
	} from '@/api/warm.js'
	import statusTab from '../../../components/statusTab/index.vue'
	const list = ref([{
			name: '户主基本信息',
		},
		{
			name: '改造房间确认',
		},
		{
			name: '光伏位置确认',

		},
	])
	const detailsData = ref()
	const certsArray = ref([]) //资产
	const positionArray = ref([]) //暖心房位置图片  
	const roofArr = ref([]) //屋面图片  
	const placeArr = ref([]) //安装位置图片  



	// 设置规则
	onMounted(() => {
		onDetails()
	})

	const onDetails = async () => {
		const res = await details()
		if (res.code === 1) {
			detailsData.value = res.data.house


			certsArray.value = res.data.house?.certs ? res.data.house.certs.split(',') : [];
			positionArray.value = res.data.house?.position ? res.data.house.position.split(',') : [];
			roofArr.value = res.data.house?.roof ? res.data.house.roof.split(',') : [];
			placeArr.value = res.data.house?.place ? res.data.house.place.split(',') : [];

			console.log('roofArr', roofArr.value, roofArr.length)

		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}


	const statusTabRef = ref(null)
	const checkStatus = ref(0)
	const checkTabClick = (val) => {
		checkStatus.value = val
	}
</script>

<style scoped lang="less">
	.details {
		.conter {
			padding: 20rpx;
			box-sizing: border-box;
			min-height: calc(100vh - 80rpx);

			.card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 25rpx;
				box-sizing: border-box;

				.col {
					width: 100%;
					margin-bottom: 35rpx;
					display: flex;

					&:last-child {
						margin-bottom: 0;
					}
				}

			}


			.step1 {
				width: 100%;

				.lebel {
					width: 250rpx;
					height: 40rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}



				.right {
					flex: 1;
					display: flex;

					.row {
						width: 50%;
						display: flex;
						margin-right: 20rpx;

						.img {
							height: 140rpx;
							width: 100%;

							image {
								width: 100%;
								height: 100%;
								background: #EDEDED;
								border-radius: 14rpx;
							}
						}

						&:last-child {
							margin-right: 0 !important;
						}
					}

					text {
						display: block;
						width: 100;
						min-height: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						word-wrap: break-word;
						word-break: break-all;
					}
				}
			}

			.step2,
			.step3 {
				width: 100%;

				.col {
					flex: 1;
					display: flex;
					flex-wrap: wrap;

					.tx {
						width: 100%;
						display: block;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						box-sizing: border-box;
						word-wrap: break-word;
						word-break: normal;
						white-space: normal;
					}


					.label {
						display: block;
						width: 100%;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						margin-bottom: 20rpx;
					}



					.right {
						flex: 1;
						display: flex;
						flex-wrap: wrap;

						.row {
							min-width: 49%;
							max-width: 49%;
							display: flex;
							flex-wrap: wrap;
							margin-bottom: 10rpx;
							margin-right: 1%;

							.img {

								height: 280rpx;
								width: 100%;

								image {
									width: 100%;
									max-height: 100%;
									object-fit: cover;
									over background: #EDEDED;
									border-radius: 14rpx;
									margin-bottom: 16rpx;
								}
							}

							.tx {
								margin-top: 10rpx;
								padding: 0 10rpx;
								box-sizing: border-box;
							}

							&:nth-child(2n) {
								box-sizing: border-box;
								margin-right: 0 !important;
							}

						}
					}


					.right2 {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						border: 1px solid #fff;
						width: 100%;

						.row {
							min-width: 49%;
							max-width: 49%;
							height: 240rpx;
							display: flex;
							flex-wrap: wrap;
							margin-bottom: 10rpx;
							margin-right: 2%;
							background-color: #EDEDED;
							border-radius: 10rpx;
							overflow: hidden;

							.img {

								height: 280rpx;
								width: 100%;

								image {
									width: 100%;
									max-height: 100%;
									object-fit: cover;
									over background: #EDEDED;
									border-radius: 14rpx;
									margin-bottom: 16rpx;
								}
							}

							.tx {
								margin-top: 10rpx;
								padding: 0 10rpx;

							}

							&:nth-child(2n) {
								box-sizing: border-box;
								margin-right: 0 !important;
							}

						}

					}

				}
			}

		}

	}
</style>